<template>
  <div class="home">
    <!-- 顶部导航 -->
    <nav class="navbar">
      <div class="container">
        <div class="nav-brand">
          <h1>在线图书销售系统</h1>
        </div>
        <div class="nav-menu">
          <router-link to="/books" class="nav-link">图书</router-link>
          <template v-if="authStore.isAuthenticated">
            <router-link to="/cart" class="nav-link">购物车</router-link>
            <router-link to="/orders" class="nav-link">订单</router-link>
            <router-link to="/profile" class="nav-link">个人中心</router-link>
            <el-button @click="authStore.logout()" type="text">退出</el-button>
          </template>
          <template v-else>
            <router-link to="/login" class="nav-link">登录</router-link>
            <router-link to="/register" class="nav-link">注册</router-link>
          </template>
        </div>
      </div>
    </nav>

    <!-- 轮播图 -->
    <div class="hero-section">
      <el-carousel height="400px">
        <el-carousel-item v-for="banner in banners" :key="banner.id">
          <div class="banner-item" :style="{ backgroundImage: `url(${banner.image})` }">
            <div class="banner-content">
              <h2>{{ banner.title }}</h2>
              <p>{{ banner.description }}</p>
              <el-button type="primary" size="large">立即购买</el-button>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 推荐图书 -->
    <div class="container">
      <section class="featured-books">
        <h2 class="section-title">推荐图书</h2>
        <div class="book-grid">
          <div v-for="book in featuredBooks" :key="book.id" class="book-card">
            <img :src="book.cover_image" :alt="book.title" class="book-cover">
            <h3 class="book-title">{{ book.title }}</h3>
            <p class="book-author">{{ book.author }}</p>
            <p class="book-price">¥{{ book.price }}</p>
            <el-button type="primary" @click="viewBook(book.slug)">查看详情</el-button>
          </div>
        </div>
      </section>

      <!-- 最新上架 -->
      <section class="new-arrivals">
        <h2 class="section-title">最新上架</h2>
        <div class="book-grid">
          <div v-for="book in newBooks" :key="book.id" class="book-card">
            <img :src="book.cover_image" :alt="book.title" class="book-cover">
            <h3 class="book-title">{{ book.title }}</h3>
            <p class="book-author">{{ book.author }}</p>
            <p class="book-price">¥{{ book.price }}</p>
            <el-button type="primary" @click="viewBook(book.slug)">查看详情</el-button>
          </div>
        </div>
      </section>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
      <div class="container">
        <p>&copy; 2024 在线图书销售系统. 保留所有权利.</p>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import api from '@/utils/api'

const router = useRouter()
const authStore = useAuthStore()

const banners = ref([
  {
    id: 1,
    title: '新书特惠',
    description: '精选新书，限时8折优惠',
    image: 'https://via.placeholder.com/1200x400/409EFF/FFFFFF?text=新书特惠'
  },
  {
    id: 2,
    title: '畅销推荐',
    description: '年度畅销图书，不容错过',
    image: 'https://via.placeholder.com/1200x400/67C23A/FFFFFF?text=畅销推荐'
  }
])

const featuredBooks = ref([])
const newBooks = ref([])

const viewBook = (slug) => {
  router.push(`/book/${slug}`)
}

const loadBooks = async () => {
  try {
    const [featuredResponse, newResponse] = await Promise.all([
      api.get('/books/books/?featured=true&limit=4'),
      api.get('/books/books/?ordering=-created_at&limit=4')
    ])
    
    featuredBooks.value = featuredResponse.data.results
    newBooks.value = newResponse.data.results
  } catch (error) {
    console.error('加载图书失败:', error)
  }
}

onMounted(() => {
  loadBooks()
})
</script>

<style scoped>
.home {
  min-height: 100vh;
}

.navbar {
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 1rem 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.nav-brand h1 {
  color: #409EFF;
  font-size: 1.5rem;
}

.nav-menu {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.nav-link {
  color: #333;
  font-weight: 500;
}

.nav-link:hover {
  color: #409EFF;
}

.hero-section {
  margin-bottom: 3rem;
}

.banner-item {
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}

.banner-content {
  background: rgba(0,0,0,0.5);
  padding: 2rem;
  border-radius: 8px;
}

.banner-content h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.banner-content p {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

.section-title {
  margin: 2rem 0;
  font-size: 1.8rem;
  color: #333;
}

.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.book-card {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  text-align: center;
}

.book-cover {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.book-title {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: #333;
}

.book-author {
  color: #666;
  margin-bottom: 0.5rem;
}

.book-price {
  font-size: 1.2rem;
  color: #F56C6C;
  font-weight: bold;
  margin-bottom: 1rem;
}

.footer {
  background: #333;
  color: white;
  text-align: center;
  padding: 2rem 0;
  margin-top: 3rem;
}
</style>
